<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车页面</title>
		<link rel="stylesheet" type="text/css" href="./css/shoppingTrolley.css">
	</head>
	<body>
		<!-- 头部栏 -->
		<header></header>
		
		<!-- 当前位置 -->
		<div id="current" style="height: 56px;background-color: #555;">
			<h3 id="currentText">
				<a href="#">购物车</a>
				<div id="currentT">
					您现在的位置:
					<span class="back">
						<a href="index.html">主页</a>
					</span>
					<span>/</span>
					<span>
						<a href="MyAccount.html">我的账户</a>
					</span>
					<span>/</span>
					<span>购物车</span>
				</div>
			</h3>
		</div>
		
		<!-- 主页,介绍 -->
		<div id="loginPage">
			<div id="loginPageLeft">
				<table class="table1" cellspacing="0" cellpadding="0" >
					<tr class="tr-first">
						<th></th>
						<th></th>
						<th>产品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
					<tr>
						<td >
							<input class="removeBtn" type="button" value="x"/>
						</td>
						<td>
							<img src="img/a1.jpg" >
						</td>
						<td>
							<a href="#">泰勒电箱琴</a>
						</td>
						<td>
							<span>￥</span>
							<span class="goods-price">15</span>
						</td>
						<td>
							<button class="jian" type="button">-</button>
							<span class="goods-num">0</span>
							<button class="jia" type="button">+</button>
						</td>
						<td>
							<span>￥</span>
							<span class="goods-single-price">0</span>
						</td>
					</tr>
				</table>
				<div class="tr-last" style="border:1px solid #E5E5E5;">
					<div>
						<input class="text" type="text" name="" id="" value="" placeholder="优惠券代码" />
						<button type="button" class="btn1">使用优惠券</button>
						<button type="button" class="btn1">更新购物车</button>
					</div>
				</div>
				
				<h2>购物车总计</h2>
				<table class="table2" cellspacing="0" cellpadding="0">
					<tr>
						<th>小计</th>
						<th>配送</th>
						<th>合计</th>
					</tr>
					<tr>
						<td>
							<span>￥</span>
    							<span class="goods-total-paice">0</span>
						</td>
						<td>
							<p>配送</p>
							<p>配送至<strong>陕西</strong></p>
							<a href="">更换地址</a>
						</td>
						<td>
							<span>￥</span>
							<span id="goods-total-paice">0</span>
						</td>
					</tr>
				</table>
				<button type="button" class="btn1">去结算</button>
			</div>
				
			<div id="loginPageRight">
				<div id="Tail2"></div>
				<p>
					<img src="img/logo-taylor-guitars.png" >
				</p>
				<div id="Tail1"></div>
			</div>
		</div>
		
		<!-- 页尾 -->
		<div id="Tail"></div>
		
		<!-- 返回顶部按钮 -->
		<div id="Top"></div>
		
		
		
	</body>
</html>
<script src="./js/Cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	let Table1 = document.querySelector('.table1');
	// let trFirst = document.querySelector('.tr-first');
	// let trLast = document.querySelector('.tr-last');
	let goods = getCookie('cart');
	
	if(typeof goods == 'undefined'){
		goodsList = [];
	}else{
		goods = JSON.parse(goods);
	}
	
	console.log(goods);
	
	let newTr = document.createElement('tr');
	goods.forEach( v =>{
		newTr.innerHTML = `
			<td >
				<input class="removeBtn" type="button" value="x"/>
			</td>
			<td>
				<img src="${v.url}" >
			</td>
			<td>
				<a href="#">${v.title}</a>
			</td>
			<td>
				<span>￥</span>
				<span class="goods-price">${v.price}</span>
			</td>
			<td>
				<button class="jian" type="button">-</button>
				<span class="goods-num">${v.num}</span>
				<button class="jia" type="button">+</button>
			</td>
			<td>
				<span>￥</span>
				<span class="goods-single-price">0</span>
			</td>
		`;
		
		// Table1.insertBefore(newTr,trLast);
		Table1.appendChild(newTr);
	})
	
	
</script>

<script src="./js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shoppingTrolley.js" type="text/javascript" charset="utf-8"></script> -->
<script>
	$("header").load("header.html");
</script>
<script>
	$("#Tail2").load("tail2.html");
</script>
<script>
	$("#Tail1").load("tail1.html");
</script>
<script>
	$("#Tail").load("tail.html");
</script>
		<!-- 返回顶部按钮 -->
<script>
	$("#Top").load("btnReturn.html");
</script>